<template>
<div id="app" :class="{'fixed-warp-body': !isFromShare}">
  <nav-bar title="核销码" left-arrow @clickLeft="$goPageBack('order/list')" />
  <div v-if="data">
    <div class="mg-all">
      <voucher-info-panel :data=voucher />
    </div>
    <div class="fixed-warp" v-if="!isFromShare">
      <div class="btn-group">
        <van-button size="small" type="primary" @click="$refs['share-overlay'].isShow = true">分享</van-button>
      </div>
    </div>
    <!-- 弹窗-分享 -->
    <share-overlay v-if="!isFromShare" ref="share-overlay" />
  </div>
  <no-data :text="errMsg" v-else-if="!isOnLoading" />

  <slogan class="mg-top-xxl" />
</div>
</template>

<script>
import {
  Button,
  ActionSheet,
  Toast
} from 'vant'
import NavBar from "@cmpt/header/navbar"
import VoucherInfoPanel from "@cmpt/voucher/info-panel"
import ShareOverlay from "@cmpt/share"
import NoData from '@cmpt/no-data'
import Slogan from '@cmpt/slogan'

import {
  getVoucherSingleDetail,
} from "@api/modules/order"
import {
  getErrInfo,
} from "@api/http"

export default {
  name: 'voucher-single',
  components: {
    [Button.name]: Button,

    NavBar,
    VoucherInfoPanel,
    ShareOverlay,
    NoData,
    Slogan,
  },

  data() {
    return {
      order_no: this.$getUrlParam('order_no') || '',
      code: this.$getUrlParam('code') || '',
      is_encode: this.$getUrlParam('is_encode') || '', // 是否加密 0:否 1:是
      data: null,
      errMsg: '',
      isOnLoading: false,
    }
  },

  computed: {
    isFromShare: function () { // 是否来自分享，等价于 is_encode == 1
      // const data = this.data || {}
      // return data.from_share == 1
      return this.is_encode == 1
    },
    voucher: function () {
      const data = this.data
      return {
        title: data.product_name,
        sku_name: data.sku_name,
        desc: data.verified_description,
        avail_description: data.avail_description,
        voucher: {
          code: data.code,
          state: data.state,
          state_name: data.state_name,
          qr_code_url: data.qr_code_url,
        },
        voucherCodeDesc: data.kind_name,
        traveler: data.traveler ? [data.traveler] : null,
      }
    }
  },

  methods: {
    async getData() {
      this.isOnLoading = true
      Toast.loading({
        duration: 10000,
        forbidClick: true
      })
      getVoucherSingleDetail({
        order_no: this.order_no,
        code: this.code,
        is_encode: this.is_encode || 0,
      }).then(res => {
        this.isOnLoading = false
        Toast.clear()
        this.data = res.data
        this.$mergePageParams({
          order_no: this.data.encode_order_no,
          code: this.data.encode_code,
          is_encode: 1,
        })
        this.$set_share({
          title: `优采订单【${this.data.code}】`,
          desc: `${this.data.order_no}，${this.data.product_name}`,
        })
      }).catch(err => {
        this.data = null
        const {
          msg
        } = getErrInfo(err)
        this.errMsg = msg
        this.isOnLoading = false
      })
    },

    resetPageUrl() {
      if (!this.isFromShare) {
        this.$mergePageParams({
          order_no: this.order_no,
          code: this.code,
          is_encode: 0,
        })
      }
    }
  },

  created() {
    this.getData()
    window.onbeforeunload = () => {
      this.resetPageUrl()
    }
  },

}
</script>

<style lang="less" src="@style_m/mod/order-detail.less"></style>
